<template>
  <div class="brand_home">
    <c-title :text="infoData.brand_name" :hide="false"></c-title>
    <div class="headBg">
      <div class="headBg_img">
        <img :src="infoData.background" alt="" />
      </div>
    </div>
    <div class="contenB">
      <div class="brandCard">
        <div class="brandImg" @click="brandDetailShowOpen">
          <img :src="infoData.brand_logo" alt="" />
        </div>
        <div class="brandDetail">
          <div class="brandDetail_title" @click="brandDetailShowOpen">{{ infoData.brand_name }}</div>
          <div class="brandDetail_tag">
            {{ infoData.main_desc }} {{ infoData.material_count && infoData.main_desc ? "|" : "" }}
            <div class="source_material_txt" @click="tolink(item, 'brand_source_material', { id: $route.params.id })">{{ infoData.material_count }}个素材</div>
          </div>
        </div>
        <div class="brandSubscribe" v-if="brand_follow_status">
          <div class="btn" @click="tapFollowM">{{ infoData.is_follow ? "已订阅" : "订阅品牌" }}</div>
          <div class="subscribe_txt">{{ infoData.follow_count ? infoData.follow_count + "+" : infoData.follow_count }}人订阅</div>
        </div>
      </div>
      <div class="source_material" v-if="Source.length > 0">
        <div class="source_material_lis" v-for="item in Source" :key="item" @click="tolink(item, 'brand_source_detail', { id: item.id })">
          <div class="source_material_lis_img" v-if="item.images.length > 0 || (item.videos && item.videos.video_image)">
            <img :src="item.images[0]" alt="" v-if="item.images.length > 0" />
            <img :src="item.videos.video_image" alt="" v-else-if="item.videos && item.videos.video_image" />
          </div>
          <div class="source_material_lis_title van-ellipsis">{{ item.title }}</div>
          <div class="memberBox">
            <img :src="item.logo" alt="" class="memberBox_img" />
            <div class="memberBox_txt">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="special_performance">
        <div class="special_performance_tag" @click="tap_performanceActive(null)" :class="{ performance_Active: performanceActive == null }">
          <div class="txt">全部</div>
          <div class="txt">({{ infoData.goods_count }}款)</div>
        </div>
        <div
          class="special_performance_tag"
          @click="tap_performanceActive(index)"
          :class="{ performance_Active: performanceActive == index }"
          v-for="(item, index) in infoData.brand_collect_list"
          :key="index"
        >
          <div class="txt">{{ item.name }}</div>
          <div class="txt" v-if="item.has_one_pfp">{{ item.has_one_pfp.activity_name }}</div>
        </div>
      </div>
      <template v-if="performanceActive != null">
        <div
          class="special_performance_activeTime"
          v-if="infoData.brand_collect_list[performanceActive].last_activity_end_time && infoData.brand_collect_list[performanceActive].activity_list.length > 0"
        >
          <i class="iconfont icon-icon_time1"></i>
          <div class="time_txt">
            <span class="time_txt_l">{{ this.nowTime > this.infoData.brand_collect_list[this.performanceActive].last_activity_start_time ? "距结束" : "距开始" }}</span>
            <van-count-down :time="fitleTime">
              <template #default="timeData">
                <span class="block">{{ timeData.days }}</span>
                <span class="colon">天</span>
                <span class="block_time">{{ timeData.hours < 10 ? "0" + timeData.hours : timeData.hours }}</span>
                <span class="colon">时</span>
                <span class="block_time">{{ timeData.minutes < 10 ? "0" + timeData.minutes : timeData.minutes }}</span>
                <span class="colon">分</span>
              </template>
            </van-count-down>
          </div>
        </div>
        <div class="special_performance_active_box" v-if="promotion_show || subject_Show || activity_show">
          <div class="special_performance_active" v-if="promotion_show" @click="activeShowTap('promotion', promotion_show)">
            <div class="special_performance_active_l">促销</div>
            <div class="special_performance_active_c">{{ promotion_show.activity_name }}</div>
            <div class="special_performance_active_r">
              <i class="iconfont icon-member_right"></i>
            </div>
          </div>
          <div class="special_performance_active" v-if="subject_Show" @click="activeShowTap('subject', subject_Show)">
            <div class="special_performance_active_l">专题</div>
            <div class="special_performance_active_c">{{ subject_Show[0].name }}</div>
            <div class="special_performance_active_r">
              <i class="iconfont icon-member_right"></i>
            </div>
          </div>
          <div class="special_performance_active" v-if="activity_show && is_shop_owner" @click="activeShowTap('active', activity_show)">
            <div class="special_performance_active_l">活动</div>
            <div class="special_performance_active_c">{{ activity_show[0].name }}</div>
            <div class="special_performance_active_r">
              <i class="iconfont icon-member_right"></i>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="conten_good" v-if="infoData">
      <div class="conten_good_l">
        <div class="conten_good_l_lis" @click="tap_cate_active(0)" :class="{ active: first_category_id == 0 }">全部</div>
        <div class="conten_good_l_lis" @click="tap_cate_active(item.id)" :class="{ active: item.id == first_category_id }" v-for="item in infoData.first_category_list" :key="item.id">
          {{ item.name }}
        </div>
      </div>
      <div class="conten_good_r">
        <div class="sort">
          <div class="sortB">
            <!-- <div class="evaluate" :style="sortEvaluate">综合</div> -->
            <div class="evaluate" :style="sortEvaluate('price')" @click="tapSortBtn('price')">价格</div>
            <div class="evaluate" :style="sortEvaluate('sales')" @click="tapSortBtn('sales')">销量</div>
            <div class="options" @click="screen_show_open">筛选<i class="iconfont icon-fontclass-shaixuan"></i></div>
          </div>
          <i class="iconfont icon-a-yanjing1" v-if="is_shop_owner" @click="show_amount = !show_amount"></i>
        </div>
        <div class="goodlis">
          <div class="lis" v-for="item in goodList" :key="item" @click="tolink(item, 'goods', { id: item.id })">
            <div class="goodsImg">
              <img :src="item.thumb" alt="" />
            </div>
            <div class="goodsTitle">
              <img :src="`${fun.getSiteRoot()}/plugins/cloud-shop/assets/image/goodIcon.png`" v-if="is_shop_owner && item.is_full_activity" class="cloud_shopImg" />
              <img :src="`${fun.getSiteRoot()}/plugins/cloud-shop/assets/image/goodIcon2.png`" v-if="is_shop_owner && item.is_rank_activity" class="cloud_shopImg" />{{ item.title }}</div>
            <div class="priceC">
              <span class="price">{{ $i18n.t("money") }}{{ item.price }}</span>
              <span class="original_price">{{ $i18n.t("money") }}{{ item.market_price }}</span>
            </div>
            <div class="lis_bottom">
              <div class="good_active" v-show="is_shop_owner && show_amount">
                <span>{{ self_reward_name }}{{ $i18n.t("money") }}{{ item.cloud_shop_reward_amount }}</span>
              </div>
              <div v-if="!is_shop_owner || (show_amount || !show_amount)"></div>
              <div class="lis_bottom_btn" @click.stop="toCar(item)">
                <i class="iconfont icon-gouwuche3"></i>
              </div>
            </div>
          </div>
          <div v-if="goodList.length <= 0" class="noneMore">
            <van-empty image="search" description="暂无更多" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom_pos set-pc-style">
      <div class="bottom_pos_left" @click="tolink({}, 'cart', {})">
        <i class="iconfont icon-gouwuche3"></i>
        <div class="bottom_pos_left_txt">购物车</div>
      </div>
      <div class="bottom_pos_right" @click="toShare" v-if="poster_status">转发全场</div>
    </div>
    <van-popup v-model="bandDetailShow" :style="{ maxHeight: '75vh' }" :close-on-click-overlay="false" position="bottom" style="background: transparent;max-heigth: 75vh;">
      <div class="bandDetail_box">
        <div class="close" @click="bandDetailShow = false">
          <i class="iconfont icon-icon_close"></i>
        </div>
        <div class="bandDetail_box_img">
          <img :src="infoData.brand_logo" alt="" />
        </div>
        <div class="bandDetail_box_name">{{ infoData.brand_name }}</div>
        <div class="bandDetail_box_des" id="goods_content" v-html="infoData.desc"></div>
        <div class="brandCard">
          <div class="brandImg">
            <img :src="infoData.brand_logo" alt="" />
          </div>
          <div class="brandDetail">
            <div class="brandDetail_title">{{ infoData.brand_name }}</div>
            <div class="brandDetail_tag">
              {{ infoData.main_desc }} {{ infoData.material_count && infoData.main_desc ? "|" : "" }}
              <div class="source_material_txt" @click="tolink(item, 'brand_source_material', { id: $route.params.id })">{{ infoData.material_count }}个素材</div>
            </div>
          </div>
          <div class="brandSubscribe" v-if="brand_follow_status">
            <div class="btn" @click="tapFollowM">{{ infoData.is_follow ? "已订阅" : "订阅品牌" }}</div>
            <div class="subscribe_txt">{{ infoData.follow_count ? infoData.follow_count + "+" : infoData.follow_count }}人订阅</div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="activeShow" position="bottom" round :style="{ maxHeight: '75vh' }" :close-on-click-overlay="false">
      <div class="active_box">
        <template v-if="acitvePopupInfo.key == 'promotion'">
          <div class="activeTitle">
            <span>促销说明</span>
            <div class="close" @click="activeShowClose">
              <i class="iconfont icon-icon_close"></i>
            </div>
          </div>
          <div class="active_name">打包一口价活动</div>
          <div class="active_lis">
            <div class="active_lis_title">{{ acitvePopupInfo.info.activity_name }}</div>
            <div class="active_lis_time">活动时间：{{ timestampToTime(acitvePopupInfo.info.start_at) }}-{{ timestampToTime(acitvePopupInfo.info.end_at) }}</div>
          </div>
        </template>
        <template v-else-if="acitvePopupInfo.key == 'active'">
          <div class="activeTitle">
            <span>活动说明</span>
            <div class="close" @click="activeShowClose">
              <i class="iconfont icon-icon_close"></i>
            </div>
          </div>
          <div class="active_name">满返活动</div>
          <div class="active_lis active_lis_a" v-for="(item, index) in acitvePopupInfo.info" :key="index" @click="tolink(item, 'full_Return_Details', { id: item.id })">
            <div class="active_lis_a_l">
              <div class="active_lis_title">{{ item.name }}</div>
              <div class="active_lis_time">活动时间：{{ timestampToTime(item.start_time) }}-{{ timestampToTime(item.end_time) }}</div>
            </div>
            <div class="active_lis_a_r">
              <i class="iconfont icon-icon_more11"></i>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="activeTitle">
            <span>专题说明</span>
            <div class="close" @click="activeShowClose">
              <i class="iconfont icon-icon_close"></i>
            </div>
          </div>
          <div class="active_name">品牌会场专题</div>
          <div class="active_lis sub" v-for="(item, index) in acitvePopupInfo.info" :key="index" @click="tolink(item, 'diy', {})">
            <div class="sub_lis_title">{{ item.name }}</div>
          </div>
        </template>
      </div>
      <div class="active_box_btn">
        <div class="closeBtn" @click="activeShowClose">完成</div>
      </div>
    </van-popup>
    <van-popup v-model="screen_show" position="bottom" round :close-on-click-overlay="false" :style="{ maxHeight: '90vh' }">
      <div class="screen_box" v-if="infoData.first_category_list">
        <div class="activeTitle">
          <span>全部筛选</span>
          <div class="close" @click="screen_showClose">
            <i class="iconfont icon-icon_close"></i>
          </div>
        </div>
        <div class="screen_option">
          <div class="screen_option_txt">价格筛选</div>
          <div class="price_interval">
            <div class="price_interval_l">
              <input type="number" placeholder="最低价" v-model="min_price" />
            </div>
            <div class="price_interval_m"></div>
            <div class="price_interval_l">
              <input type="number" placeholder="最高价" v-model="max_price" />
            </div>
          </div>
        </div>
        <div class="screen_option" v-if="second_category_arr || !first_category_id">
          <div class="screen_option_txt fjs">
            一级分类
            <i class="iconfont icon-icon_up1" v-if="infoData.first_category_list.length > 6 && !showSplice" @click="showSplice = true"></i>
            <i class="iconfont icon-icon_down1" v-if="showSplice" @click="showSplice = false"></i>
          </div>
          <div class="class_option">
            <div
              class="class_option_txt"
              :class="{ isSelect: first_category_id == item.id }"
              @click="tapCateChild(item.id, 1)"
              v-for="(item, index) in arrSlice(infoData.first_category_list)"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="screen_option" v-if="second_category_arr.length > 0">
          <div class="screen_option_txt fjs">
            二级分类
            <i class="iconfont icon-icon_up1" v-if="second_category_arr.length > 6 && !showSplice_two" @click="showSplice_two = true"></i>
            <i class="iconfont icon-icon_down1" v-if="showSplice_two" @click="showSplice_two = false"></i>
          </div>
          <div class="class_option">
            <div
              class="class_option_txt"
              :class="{ isSelect: second_category_id == item.id }"
              @click="tapCateChild(item.id, 2)"
              v-for="(item, index) in arrSlice_two(second_category_arr)"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="screen_option" v-if="infoData.cat_level == '3' && third_category_arr.length > 0">
          <div class="screen_option_txt fjs">
            三级分类
            <i class="iconfont icon-icon_up1" v-if="third_category_arr.length > 6 && !showSplice_thr" @click="showSplice_thr = true"></i>
            <i class="iconfont icon-icon_down1" v-if="showSplice_thr" @click="showSplice_thr = false"></i>
          </div>
          <div class="class_option">
            <div class="class_option_txt" :class="{ isSelect: third_category_id == item.id }" v-for="(item, index) in arrSlice_thr(third_category_arr)" @click="tapCateChild(item.id, 3)" :key="index">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="screen_btn">
        <div class="reset btn" @click="resetTap">重置</div>
        <div class="confirm btn" @click="tapConfirm">确认</div>
      </div>
    </van-popup>
    <yz_specs v-model="popupSpecs" :goodsInfo="goodsInfo" @closeSpecsPopup="closeSpecsPopup" />
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import yz_specs from "../../components/ui_components/yz_specs.vue";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      performanceActive: null,
      redColor: "#F15353",
      defaultColor: "#AAAAB3",
      // 品牌详情弹窗
      bandDetailShow: false,
      // 活动弹窗
      activeShow: false,
      // 筛选弹窗
      screen_show: false,

      infoData: [],
      nowTime: parseInt(new Date().getTime() / 1000),
      acitvePopupInfo: {
        info: {},
        key: ""
      },
      Source: [],
      first_category_id: "",
      second_category_id: "",
      third_category_id: "",
      // 二级显示数组
      second_category_arr: [],
      // 三级显示数组
      third_category_arr: [],
      collect_id: "",
      max_price: "",
      min_price: "",
      goodList: [],
      page: 1,
      total_page: 0,
      isLoadMore: true,
      // is_shop_owner是否是店主
      is_shop_owner: false,
      show_amount: true,
      order_column: "",
      order_sort: "",
      showSplice: false,
      showSplice_two: false,
      showSplice_thr: false,
      // 销售佣金
      self_reward_name: "省/赚",
      goodsInfo: [],
      popupSpecs: false,
      brand_follow_status: 0,
      poster_status: 0
    };
  },
  activated() {
    this.getData();
    let basic_info = JSON.parse(localStorage.getItem("yz_basic_info")).plugin_setting?.cloud_shop;
    if (basic_info) {
      this.is_shop_owner = basic_info.is_shop_owner;
      this.brand_follow_status = basic_info.brand_follow_status;
      console.log(this.brand_follow_status, "brand_follow_status", basic_info);
      this.self_reward_name = basic_info.self_reward_name;
      this.poster_status = basic_info.poster_status;
    }
  },
  methods: {
    screen_showClose() {
      this.screen_show = false;
      this.showSplice = false;
      this.showSplice_two = false;
      this.showSplice_thr = false;
    },
    toShare() {
      let params = { brand_id: this.$route.params.id };
      if (this.performanceActive != null) {
        params.brand_collect_id = this.infoData.brand_collect_list[this.performanceActive].id;
      }
      this.$router.push(this.fun.getUrl("cloud_shop_sharePage", params));
    },
    async closeSpecsPopup(optionsIde, goodsCount, clicktype, popCard) {
      console.log(optionsIde, goodsCount, clicktype, popCard);
      let json = {
        total: goodsCount,
        option_id: optionsIde,
        goods_id: this.goodsInfo.id
      };
      if (clicktype == 1) {
        let { msg, result } = await $http.post("member.member-cart.store", json, "");
        if (result) {
          this.$toast(msg);
          this.goodsInfo = [];
          this.popupSpecs = false;
        } else {
          this.$toast(msg);
        }
      } else {
        this.goodsInfo = [];
        this.popupSpecs = false;
      }
      // member.member-cart.store
    },
    toCar(item) {
      this.goodsInfo = item;
      this.popupSpecs = true;
    },
    brandDetailShowOpen() {
      this.bandDetailShow = true;
    },
    tolink(item, key, params = {}) {
      if (key == "diy") {
        if (!item.web_url) return this.$toast("未设置专题链接");
        window.location.href = item.web_url;
        return;
      }
      this.$router.push(this.fun.getUrl(key, params));
    },
    resetTap() {
      this.min_price = "";
      this.max_price = "";
      this.second_category_arr = [];
      this.second_category_id = "";
      this.third_category_arr = [];
      this.third_category_id = "";
      this.first_category_id = "";
    },
    async tapCateChild(id, key) {
      if (key == 1) {
        this.first_category_id = id;
        this.second_category_id = "";
        this.second_category_arr = [];
        this.third_category_id = "";
        this.third_category_arr = [];
        this.getNextCate(2);
      }
      if (key == 2) {
        this.second_category_id = id;
        this.third_category_id = "";
        this.third_category_arr = [];
        this.getNextCate(3);
      }
      if (key == 3) {
        this.third_category_id = id;
      }
    },
    screen_show_open() {
      if (this.first_category_id) {
        this.getNextCate(2);
      }
      this.screen_show = true;
    },
    async getNextCate(key) {
      let json = {
        first_category_id: this.first_category_id
      };
      if (key == 3 && this.infoData.cat_level == '3') {
        // 获取三级分类
        json.second_category_id = this.second_category_id;
      }
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.brand.categoryList", json, "");
      if (result) {
        if (key == 2) {
          this.second_category_arr = data.second_category_list;
        } else {
          this.third_category_arr = data.third_category_list;
        }
      } else {
        this.$toast(msg);
      }
    },
    activeShowClose() {
      this.activeShow = false;
      this.acitvePopupInfo.info = {};
      this.acitvePopupInfo.key = "";
    },
    activeShowTap(key, obj) {
      this.acitvePopupInfo.info = obj;
      this.acitvePopupInfo.key = key;
      this.activeShow = true;
      console.log(key, obj);
    },
    toBrandSourceMaterial() {
      this.$router.push(this.fun.getUrl("brand_source_detail", {}));
    },
    tap_performanceActive(key) {
      console.log(key);
      this.performanceActive = key;
      this.init();
      this.getNextGood();
    },
    tap_cate_active(id) {
      this.first_category_id = id;
      this.second_category_id = "";
      this.second_category_arr = [];
      this.third_category_arr = [];
      this.third_category_id = "";
      this.init();
      this.getNextGood();
    },
    async getNextGood() {
      let json = {
        brand_id: this.$route.params.id,
        first_category_id: this.first_category_id,
        second_category_id: this.second_category_id,
        third_category_id: this.third_category_id,
        max_price: this.max_price,
        min_pmin_price: this.min_price,
        order_column: this.order_column,
        order_sort: this.order_sort
      };
      console.log(this.performanceActive, "this.performanceActive");
      if (this.performanceActive != null) {
        json.collect_id = this.infoData.brand_collect_list[this.performanceActive].id;
      }
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.brand.goodsList", json, "");
      if (result) {
        this.goodList = data.list.data;
        this.total_page = data.list.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          brand_id: this.$route.params.id,
          first_category_id: this.first_category_id,
          second_category_id: this.second_category_id,
          third_category_id: this.third_category_id,
          max_price: this.max_price,
          min_pmin_price: this.min_price,
          order_column: this.order_column,
          order_sort: this.order_sort
        };
        if (this.performanceActive != null) {
          json.collect_id = this.infoData.brand_collect_list[this.performanceActive].id;
        }
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.brand.goodsList", json, "");
        this.isLoadMore = true;
        if (result) {
          this.goodList = this.goodList.concat(data.list.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    },
    async getData() {
      let json = {
        brand_id: this.$route.params.id
      };
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.brand.index", json, "");
      if (result) {
        console.log(data);
        this.infoData = data;
        if (data.first_category_list.length > 0) {
          if (this.performanceActive == null) {
            this.first_category_id = 0;
          } else {
            this.first_category_id = data.first_category_list[0].id;
          }
        }
        this.getSource();
        this.init();
        this.getNextGood();
      } else {
        this.$toast(msg);
      }
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    async getSource() {
      let json = {
        brand_id: this.$route.params.id
      };
      let { data, msg, result } = await $http.post("plugin.material-center.api.centerlist.index", json, "");
      if (result) {
        this.Source = data.list.data;
      } else {
        this.$toast(msg);
      }
    },
    timestampToTime: function(timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "/";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/";
      let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    async tapFollowM() {
      let json = {
        brand_id: this.$route.params.id,
        status: this.infoData.is_follow ? 0 : 1
      };
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.brand.follow", json, "");
      if (result) {
        this.infoData.is_follow = this.infoData.is_follow ? 0 : 1;
        if (this.infoData.is_follow) {
          this.infoData.follow_count = this.infoData.follow_count + 1;
        } else {
          this.infoData.follow_count = this.infoData.follow_count - 1;
        }
        this.$toast(msg);
      } else {
        this.$toast(msg);
      }
    },
    tapConfirm() {
      this.init();
      this.getNextGood();
      this.screen_show = false;
    },
    tapSortBtn(key) {
      if (!this.order_column || this.order_column != key) {
        this.order_sort = "";
      }
      if (!this.order_sort || this.order_sort == "DESC") {
        this.order_sort = "ASC";
      } else {
        this.order_sort = "DESC";
      }
      this.order_column = key;
      this.init();
      this.getNextGood();
    }
  },
  computed: {
    arrSlice(arr) {
      return function(arr) {
        if (!this.showSplice) {
          return arr.slice(0, 6);
        } else {
          return arr;
        }
      };
    },
    arrSlice_two(arr) {
      return function(arr) {
        if (!this.showSplice_two) {
          return arr.slice(0, 6);
        } else {
          return arr;
        }
      };
    },
    arrSlice_thr(arr) {
      return function(arr) {
        if (!this.showSplice_thr) {
          return arr.slice(0, 6);
        } else {
          return arr;
        }
      };
    },
    fitleTime() {
      if (this.nowTime > this.infoData.brand_collect_list[this.performanceActive].last_activity_start_time) {
        return (this.infoData.brand_collect_list[this.performanceActive].last_activity_end_time - this.nowTime) * 1000;
      } else {
        return (this.infoData.brand_collect_list[this.performanceActive].last_activity_start_time - this.nowTime) * 1000;
      }
    },
    promotion_show() {
      if (this.infoData.brand_collect_list && this.infoData.brand_collect_list[this.performanceActive] && this.infoData.brand_collect_list[this.performanceActive].has_one_pfp) {
        return this.infoData.brand_collect_list[this.performanceActive].has_one_pfp;
      } else {
        return false;
      }
    },
    activity_show() {
      if (this.infoData.brand_collect_list && this.infoData.brand_collect_list[this.performanceActive] && this.infoData.brand_collect_list[this.performanceActive].activity_list.length > 0) {
        return this.infoData.brand_collect_list[this.performanceActive].activity_list;
      } else {
        return false;
      }
    },
    subject_Show() {
      if (this.infoData.brand_collect_list && this.infoData.brand_collect_list[this.performanceActive] && this.infoData.brand_collect_list[this.performanceActive].subject_list.length > 0) {
        return this.infoData.brand_collect_list[this.performanceActive].subject_list;
      } else {
        return false;
      }
    },
    sortEvaluate(key) {
      return function(key) {
        if (this.order_column == key) {
          if (this.order_sort == "ASC") {
            return {
              "--up": this.redColor,
              "--down": this.defaultColor
            };
          } else {
            return {
              "--up": this.defaultColor,
              "--down": this.redColor
            };
          }
        } else {
          return {
            "--up": this.defaultColor,
            "--down": this.defaultColor
          };
        }
      };
    }
  },
  components: { yz_specs }
};
</script>
<style lang="scss" scoped>
// 筛选弹窗
.screen_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  box-shadow: 0rem -0.03rem 0.31rem 0.03rem #f5f5f5;
  padding: 0.59rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  .reset {
    border-radius: 1.28rem 1.28rem 1.28rem 1.28rem;
    border: 0.03rem solid #d6d6dc;
    font-weight: 500;
    font-size: 0.94rem;
  }
  .confirm {
    width: 10.63rem;
    height: 2.5rem;
    background: #f15353;
    border-radius: 1.28rem 1.28rem 1.28rem 1.28rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #ffffff;
    margin-left: 0.69rem;
  }
  .btn {
    text-align: center;
    line-height: 2.5rem;
    width: 10.63rem;
    height: 2.5rem;
    border-radius: 1.28rem;
  }
}
.screen_box {
  padding: 1.19rem 0.75rem 1.19rem 0.94rem;
  position: relative;

  .screen_option {
    margin-bottom: 1.5rem;
    .fjs {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon-icon_down1 {
        color: #aaaab3;
        font-size: 0.9rem;
      }
      .icon-icon_up1 {
        color: #aaaab3;
      }
    }
    .screen_option_txt {
      font-weight: bold;
      font-size: 0.88rem;
      margin-bottom: 0.94rem;
      text-align: left;
    }
    .class_option {
      display: flex;
      flex-wrap: wrap;
      .class_option_txt {
        box-sizing: border-box;
        padding: 0.5rem 1.7rem;
        background: #f5f5f5;
        border-radius: 1rem;
        font-size: 0.88rem;
        color: #00001c;
        margin-right: 0.66rem;
        margin-bottom: 0.35rem;
      }
      .isSelect {
        background: #f15353;
        color: #fff;
      }
    }
    .price_interval {
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      box-sizing: border-box;
      .price_interval_l {
        width: 9.5rem;
        font-size: 0.88rem;
        color: #aaaab3;
        padding: 0.56rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f5f5f5;
        border-radius: 1rem;
        input {
          text-align: center;
          border: none;
        }
      }
      .price_interval_m {
        flex-shrink: 0;
        width: 1.25rem;
        height: 0.03rem;
        background: #999999;
        margin: 0 0.75rem;
      }
    }
  }
  .activeTitle {
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 1rem;
    color: #00001c;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.09rem;
    .close {
      width: 1.5rem;
      height: 1.5rem;
      background: #f0f0f1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-icon_close {
        font-size: 0.9rem;
        color: #6e6e79;
      }
    }
  }
}
// 活动弹窗
.active_box_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.75rem;
  background: #ffffff;
  box-shadow: 0rem -0.03rem 0.31rem 0.03rem #f5f5f5;
  .closeBtn {
    width: 100%;
    margin: 0 0.75rem;
    height: 2.5rem;
    color: #ffffff;
    background: #f15353;
    border-radius: 1.28rem;
    line-height: 2.5rem;
  }
}
.active_box {
  padding: 1.19rem 0.75rem 1.19rem 0.94rem;
  position: relative;
  .active_lis_a {
    display: flex;
    align-items: center;
    .active_lis_a_l {
      flex: 1;
    }
    .active_lis_a_r {
      flex-shrink: 0;
      .icon-icon_more11 {
        color: #aaaab3;
      }
    }
  }
  .active_lis {
    padding: 0.75rem 0.5rem;
    background: #f15353;
    border-radius: 0.5rem;
    background: #fef1f1;
    text-align: left;
    margin-bottom: 0.5rem;
    .active_lis_title {
      font-weight: 500;
      font-size: 0.88rem;
      color: #f15353;
    }
    .sub_lis_title {
      font-weight: 500;
      font-size: 0.88rem;
      color: #00001c;
    }
    .active_lis_time {
      font-size: 0.75rem;
      color: #6e6e79;
      margin-top: 0.31rem;
      line-height: 0.9rem;
    }
  }
  .sub {
    background: none;
    padding: 0.75rem 0;
  }
  .active_name {
    margin-top: 1.5rem;
    margin-bottom: 0.47rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #f15353;
    text-align: left;
  }
  .activeTitle {
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 1rem;
    color: #00001c;
    display: flex;
    justify-content: space-between;
    .close {
      width: 1.5rem;
      height: 1.5rem;
      background: #f0f0f1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-icon_close {
        font-size: 0.9rem;
        color: #6e6e79;
      }
    }
  }
}
//活动弹窗 end
.bandDetail_box {
  border-radius: 0.94rem 0.94rem 0 0;
  position: relative;
  background: #ffffff;
  padding: 1.28rem 0.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .bandDetail_box_name {
    font-weight: bold;
    margin: 1rem 0;
  }
  .bandDetail_box_des {
    text-align: left;
    width: 100%;
  }
  .bandDetail_box_img {
    width: 5.38rem;
    height: 5.38rem;
    background: #ffffff;
    border-radius: 0.94rem;
    border: 0.03rem solid #dedede;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.94rem;
    }
  }
  .close {
    position: absolute;
    top: 0.63rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #f0f0f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-icon_close {
      font-size: 0.9rem;
      color: #6e6e79;
    }
  }
  .brandCard {
    margin-top: 1.5rem;
    background: #ffffff;
    width: 100%;
    padding: 0.63rem 0.53rem;
    box-sizing: border-box;
    display: flex;
    box-shadow: 0rem 0.25rem 0.63rem 0.03rem #f5f5f5;
    border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
    border: 0.03rem solid #e9e9e9;
    .brandImg {
      width: 3rem;
      height: 3rem;
      background: #ffffff;
      border-radius: 0.5rem;
      border: 0.03rem solid #e9e9e9;
      margin-right: 0.38rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
      }
    }
    .brandSubscribe {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .btn {
        padding: 0.31rem 0.56rem;
        box-sizing: border-box;
        background: #f15353;
        border-radius: 0.94rem;
        font-size: 0.81rem;
        color: #ffffff;
      }
      .subscribe_txt {
        font-size: 0.69rem;
        color: #aaaab3;
      }
    }
    .brandDetail {
      flex: 1;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .brandDetail_title {
        font-weight: bold;
        font-size: 1rem;
        color: #00001c;
      }
      .brandDetail_tag {
        font-size: 0.75rem;
        color: #808080;
        display: flex;
      }
    }
  }
}
.bottom_pos {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 3.06rem;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.75rem;
  box-sizing: border-box;
  .bottom_pos_left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .bottom_pos_right {
    margin-left: 0.97rem;
    flex: 1;
    width: 18.5rem;
    height: 2.5rem;
    background: #f15353;
    border-radius: 1.25rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #ffffff;
    line-height: 2.5rem;
    text-align: center;
  }
}
.brand_home {
  min-height: 100vh;
}
.headBg {
  height: 11.25rem;
  font-size: 1rem;
  color: #ffffff;
  text-align: left;
  overflow: hidden;
  box-sizing: border-box;
  .headBg_img {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .headBg_img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.conten_good {
  margin-top: 0.63rem;
  border-radius: 0.63rem;
  display: flex;
  padding-bottom: 3.1rem;
  .conten_good_l {
    border-radius: 0.5rem 0 0 0;
    width: 5rem;
    background: #fafafa;
    flex-shrink: 0;
    position: sticky;
    top: 40px;
    left: 0;
    height: 100%;
    .conten_good_l_lis {
      height: 3.62rem;
      line-height: 3.62rem;
      font-size: 0.81rem;
      color: #3b3b4a;
    }
    .active {
      font-weight: bold;
      font-size: 0.88rem;
      color: #f15353;
    }
  }

  .conten_good_r {
    flex: 1;
    background: #ffffff;
    border-radius: 0 0.5rem 0 0;
    .goodlis {
      padding: 0 0.63rem;
      padding-bottom: 3rem;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .noneMore {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .lis {
        width: 8.31rem;
        margin-bottom: 0.94rem;
        .goodsImg {
          width: 8.31rem;
          height: 8.31rem;
          border-radius: 0.63rem;
          background: #f0f0f1;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.63rem;
          }
        }
        .goodsTitle {
          margin-top: 0.5rem;
          font-weight: 500;
          font-size: 0.81rem;
          line-height: 1.13rem;
          text-align: left;
          display: flex;
          align-items: flex-start;
          img{
            flex-shrink: 0;
          }
        }
        .lis_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.19rem;
          .good_active {
            font-weight: 500;
            font-size: 0.81rem;
            color: #f15353;
            padding: 0.09rem 0.25rem;
            background: #feeded;
            border-radius: 0.25rem;
            text-align: left;
            word-break: break-all;
          }
          .lis_bottom_btn {
            flex-shrink: 0;
            margin-left: 0.25rem;
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 1.56rem;
            border: 0.06rem solid #f15353;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon-gouwuche3 {
              color: #f15353;
              font-size: 0.65rem;
            }
          }
        }
        .priceC {
          display: flex;
          align-items: flex-end;
          flex-wrap: wrap;
          .price {
            font-weight: bold;
            font-size: 0.94rem;
            color: #f15353;
            word-break: break-all;
            text-align: left;
          }
          .original_price {
            font-size: 0.75rem;
            color: #999999;
            text-decoration-line: line-through;
            margin-left: 0.28rem;
            word-break: break-all;
            text-align: left;
          }
        }
      }
    }
    .sort {
      height: 3.62rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 0.94rem;
      padding-left: 0.75rem;
      position: sticky;
      top: 40px;
      right: 0;
      background: #fff;
      .icon-a-yanjing1 {
        color: #aaaab3;
        font-size: 0.7rem;
      }
      .sortB {
        position: relative;
        display: flex;
        align-items: center;
        .evaluate,
        .options {
          font-size: 0.81rem;
          color: #3b3b4a;
          position: relative;
          margin-left: 2.13rem;
          display: flex;
          align-items: center;
          .icon-fontclass-shaixuan {
            font-size: 0.9rem;
            color: #aaaab3;
          }
        }
        .evaluate:first-child {
          margin-left: 0;
        }
        .evaluate::before {
          content: "";
          position: absolute;
          top: 20%;
          right: -0.8rem;
          display: inline-block;
          width: 0.5rem;
          height: 0.2188rem;
          border-left: 0.21rem solid transparent;
          border-right: 0.21rem solid transparent;
          border-bottom: 0.21rem solid var(--up);
        }
        .evaluate::after {
          content: "";
          position: absolute;
          top: 50%;
          right: -0.8rem;
          display: inline-block;
          width: 0.5rem;
          height: 0.2188rem;
          border-left: 0.21rem solid transparent;
          border-right: 0.21rem solid transparent;
          border-top: 0.21rem solid var(--down);
        }
      }
    }
  }
}
.contenB {
  position: relative;
  margin-top: -0.63rem;
  background: #f5f5f5;
  border-radius: 0.63rem;
  padding: 1.47rem 0.75rem 0 0.75rem;
  box-sizing: border-box;
  .special_performance_active_box {
    margin-top: -0.2rem;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 1.03rem 0.75rem;
    .special_performance_active {
      margin-bottom: 1.22rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.81rem;
      .special_performance_active_l {
        color: #6e6e79;
      }
      .special_performance_active_c {
        text-align: left;
        flex: 1;
        margin-left: 1.13rem;
      }
    }
    .special_performance_active:last-child {
      margin-bottom: 0;
    }
  }

  .special_performance_activeTime {
    margin-top: 0.63rem;
    display: flex;
    align-items: center;
    padding: 0 0.81rem;
    box-sizing: border-box;
    background: linear-gradient(90deg, #ffe2c1 0%, #f9c386 100%);
    border-radius: 0.94rem 0.94rem 0 0rem;
    padding-top: 0.69rem;
    padding-bottom: 0.69rem;
    .icon-icon_time1 {
      margin-right: 0.41rem;
      font-size: 1.4rem;
    }
    .time_txt {
      display: flex;
      font-weight: bold;
      font-size: 0.88rem;
      color: #441600;
      .time_txt_l {
        margin-right: 0.41rem;
      }
      .block {
        font-weight: bold;
        font-size: 0.88rem;
      }
      .block_time {
        padding: 0.22rem;
        background: #feebd6;
        border-radius: 0.38rem;
        margin: 0 0.19rem;
      }
      .colon {
        font-weight: bold;
        font-size: 0.88rem;
      }
    }
  }
  .special_performance {
    padding: 0.63rem 0 0.31rem 0;
    box-sizing: border-box;
    display: flex;
    position: relative;
    margin-bottom: 0.63rem;
    overflow-x: scroll;
    .special_performance_tag {
      flex-shrink: 0;
      background: #ffffff;
      border-radius: 0.5rem;
      padding: 0.38rem 0;
      width: 7rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 0.81rem;
      font-weight: 500;
      margin-right: 0.47rem;
      .txt {
        line-height: 0.94rem;
        color: #6e6e79;
        text-align: center;
      }
    }
    .performance_Active {
      background: #f15353;
      .txt {
        color: #ffffff;
      }
    }
    .special_performance:last-child {
      margin-right: 0;
    }
  }

  .source_material {
    margin-top: 0.63rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-end;
    overflow-x: scroll;
    .source_material_lis {
      margin-right: 0.63rem;
      flex-shrink: 0;
      width: 7rem;
      background: #ffffff;
      border-radius: 0.5rem;
      padding-bottom: 0.53rem;
      box-sizing: border-box;
      .memberBox {
        display: flex;
        align-items: center;
        overflow: hidden;
        padding: 0 0.38rem;
        box-sizing: border-box;
        .memberBox_img {
          width: 1.25rem;
          height: 1.25rem;
          background: #e9e9e9;
          border-radius: 50%;
          margin: 0;
          margin-right: 0.22rem;
        }
        .memberBox_txt {
          font-size: 0.69rem;
          color: #6e6e79;
        }
      }
      .source_material_lis_img {
        height: 7rem;
        width: 7rem;
        border-radius: 0.5rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
        }
      }
      .source_material_lis_title {
        padding: 0.38rem;
        padding-bottom: 0;
        box-sizing: border-box;
        text-align: left;
      }
    }
  }
  .brandCard {
    height: 4rem;
    background: #ffffff;
    border-radius: 0.63rem;
    margin-top: -4.3rem;
    padding: 0.63rem 0.53rem;
    display: flex;
    .brandImg {
      width: 3rem;
      height: 3rem;
      background: #ffffff;
      border-radius: 0.5rem;
      border: 0.03rem solid #e9e9e9;
      margin-right: 0.38rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
      }
    }
    .brandSubscribe {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .btn {
        padding: 0.31rem 0.56rem;
        box-sizing: border-box;
        background: #f15353;
        border-radius: 0.94rem;
        font-size: 0.81rem;
        color: #ffffff;
      }
      .subscribe_txt {
        font-size: 0.69rem;
        color: #aaaab3;
      }
    }
    .brandDetail {
      flex: 1;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .brandDetail_title {
        font-weight: bold;
        font-size: 1rem;
        color: #00001c;
      }
      .brandDetail_tag {
        font-size: 0.75rem;
        color: #808080;
        .source_material_txt {
          display: inline-block;
        }
      }
    }
  }
}
.cloud_shopImg{
  width: 0.94rem;
  height: 0.94rem;
  margin: 0;
  margin-right: 0.15rem;
}
</style>
